<ol class="breadcrumb newcrumb">
    <li>
        <a href="#">
            <span><i class="fa fontello-home-outline"></i>
            </span>Home</a>
    </li>
    <li class="active">Mail</li>
</ol>

<!-- Small boxes (Stat box) -->
<div class="row">
    <!-- SIDEMENU MAIL -->
    <div class="col-sm-3">
        <div class="side-mail">
            <div class="btn btn-lg bg-green button-mail" data-toggle="modal" data-target="#MailModal"><i class="entypo-pencil"></i>&nbsp;&nbsp;Compose Mail</div>
        </div>

        <div style="margin:0" class="list-group no-border">
            <a href="#" class="list-group-item bg-green">
                <i class=" fontello-inbox"></i>&nbsp;&nbsp;Inbox
                <span class="badge text-green">147</span>
            </a>
            <a href="#" class="list-group-item">

                <i class="fontello-pencil-1"></i>&nbsp;&nbsp;Draft
                <span class="badge bg-aqua">5</span>

            </a>
            <a href="#" class="list-group-item">
                <span class="fontello-paper-plane"></span>&nbsp;&nbsp;Sent</a>
            <a href="#" class="list-group-item">
                <span class="fontello-trash-2"></span>&nbsp;&nbsp;Trush
                <span class="badge bg-green">68</span>
            </a>
            <a href="#" class="list-group-item">
                <span class="fontello-fire"></span>&nbsp;&nbsp;Spam
                <span class="badge bg-red">534</span>
            </a>
        </div>

        <div style="margin:20px 0 0" class="list-group no-border">
            <a href="#" class="list-group-item">
                Folder<span class="pull-right text-right text-green fontello-cog-1"></span>
               
            </a>
            <a href="#" class="list-group-item">
                <span class="fontello-folder"></span>&nbsp;&nbsp;Important
            </a>
            <a href="#" class="list-group-item">
                <span class="fontello-folder"></span>&nbsp;&nbsp;Task
            </a>
            <a href="#" class="list-group-item">
                <span class="fontello-folder"></span>&nbsp;&nbsp;Jobs
            </a>
            <a href="#" class="list-group-item">
                <span class="fontello-folder"></span>&nbsp;&nbsp;Client
            </a>

        </div>

        <div aria-labelledby="myLargeModalLabel" role="dialog" tabindex="-1" class="modal fade bs-example-modal-lg" style="display: none;" id="MailModal">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">

                    <div class="modal-header bg-white">
                        <button aria-hidden="true" data-dismiss="modal" class="close" type="button">
                            <span class="entypo-cancel"></span>
                        </button>
                        <h4 id="myLargeModalLabel" class="modal-title">
                            <span class="profile-rounded"><i class="fontello-wrench-outline"></i>
                            </span>&nbsp;&nbsp;Compose Mail</h4>
                    </div>
                    <div class="modal-body">

                        <div style="padding:20px" class="compose_mail">
                            <form role="form">
                                <div class="form-group">

                                    <input type="email" placeholder="To" id="exampleInputEmail1" class="form-control">
                                </div>
                                <div class="form-group">

                                    <input type="email" placeholder="Subject" id="exampleInputPassword1" class="form-control">
                                </div>

                                <form>
                                    <textarea style="height:40px!important" id="editor1" name="editor1" rows="5" cols="50">
                                        This is my textarea to be replaced with CKEditor.
                                    </textarea>
                                </form>
                                <br>


                            </form>
                        </div>
                    </div>
                    <div class="modal-footer bg-white">
                        <button class="btn bg-aqua" type="submit">Send</button>
                        <button class="btn bg-green" type="submit">
                            <span class="fontawesome-save"></span>Save as Draft</button>
                        <div style="clear:both;"></div>
                    </div>

                </div>
            </div>
        </div>
    </div>
    <!-- /SIDEMENU MAIL -->

    <!-- CONTENT MAIL -->
    <div class="col-sm-9">
        <div class="mail_header">
            <div class="row">
                <div class="col-sm-6 no-padding">
                    <div style="margin-right:10px" class="btn-group pull-left">
                        <div class="btn btn-default">
                            <input type="checkbox" style="margin:0 5px;padding:0;position:relative;top:2px;">All</div>
                        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                            <span class="caret"></span>
                            <span class="sr-only">Toggle Dropdown</span>
                        </button>
                        <ul class="dropdown-menu" role="menu">
                            <li><a href="#">None</a>
                            </li>
                            <li><a href="#">read</a>
                            </li>
                            <li><a href="#">Unread</a>
                            </li>
                        </ul>
                    </div>



                    <div style="margin-right:10px" class="btn-group pull-left">
                        <button type="button" class="btn  btn-default dropdown-toggle" data-toggle="dropdown">More
                            <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu" role="menu">
                            <li><a href="#"><i class="fa fa-pencil"></i> Mark as Read</a>
                            </li>
                            <li><a href="#"><i class="fa fa-ban"></i> Spam</a>
                            </li>
                            <li class="divider"></li>
                            <li><a href="#"><i class="fa fa-trash-o"></i> Delete</a>
                            </li>
                        </ul>
                    </div>

                    <button style="margin-right:10px" type="button" data-color="#39B3D7" data-opacity="0.95" class="btn btn-default button test pull-left">
                        <span class="fontello-loop"></span>&nbsp;&nbsp;Refresh</button>
                </div>


                <div class="col-sm-6 no-padding">
                    <div class="btn-group pull-right">
                        <button type="button" class="btn btn-default">
                            <span class="fontello-left-open-outline"></span>
                        </button>
                        <button type="button" class="btn btn-default">
                            <span class="fontello-right-open-outline"></span>
                        </button>
                    </div>

                    <div class="btn-group pull-right" style="margin-right:10px;">
                        <button type="button" class="btn btn-default ">1-50 of 124</button>
                    </div>
                </div>
            </div>
        </div>

        <div id="content-mail">
            <div class="table-responsive">
                <!-- THE MESSAGES -->
                <table class="table table-mailbox">
                    <tr class="unread">
                        <td class="small-col">
                            <input type="checkbox" />
                        </td>
                        <td class="small-col"><i class="fa fa-star"></i>
                        </td>
                        <td class="name"><a class="star" href=""><i class="fa fa-twitter"></i></a>
                        </td>
                        <td>Twitter</td>
                        <td class="subject">
                            <p class="email-summary">
                                <strong>Do You Know</strong>Iko Uwais, Justin Beiber on twitter? ...</p>
                        </td>
                        <td class="time text-right">Jan 8 at 07:10am</td>
                    </tr>

                    <tr class="unread">
                        <td class="small-col">
                            <input type="checkbox" />
                        </td>
                        <td class="small-col"><i class="fa fa-star"></i>
                        </td>
                        <td class="name"> <a class="star" href=""><i class="fa fa-facebook"></i></a>
                        </td>
                        <td>Facebook</td>
                        <td class="subject">
                            <p class="email-summary">
                                <strong>Meeting Reminder</strong>Ut enim ad minim veniam, quis nostrud exercitation...</p>
                        </td>
                        <td class="time text-right">Yesterday at 1:30am</td>
                    </tr>


                    <tr class="unread">
                        <td class="small-col">
                            <input type="checkbox" />
                        </td>
                        <td class="small-col"><i class="fa fa-star"></i>
                        </td>
                        <td class="name">
                            <a class="star" href="">
                                <span class="entypo-instagrem"></span>
                            </a>
                        </td>
                        <td>Instagram</td>
                        <td class="subject">
                            <p class="email-summary">
                                <strong>User Interface Conference</strong>Ut enim ad minim veniam, quis nostrud exercitation...</p>
                        </td>
                        <td class="time text-right">Jan 13 at 7:30am</td>
                    </tr>


                    <tr class="unread">
                        <td class="small-col">
                            <input type="checkbox" />
                        </td>
                        <td class="small-col"><i class="fa fa-star"></i>
                        </td>
                        <td class="name">
                            <a class="star" href="">
                                <span class="entypo-user"></span>
                            </a>
                        </td>
                        <td>Jhony Deep</td>
                        <td class="subject">
                            <p class="email-summary">
                                <strong>Hi, matirasa</strong>how are u today?</p>
                        </td>
                        <td class="time text-right">Jan 11 at 7:32am</td>
                    </tr>


                    <tr class="unread">
                        <td class="small-col">
                            <input type="checkbox" />
                        </td>
                        <td class="small-col"><i class="fa fa-star"></i>
                        </td>
                        <td class="name">
                            <a class="star" href="">
                                <span class="entypo-behance"></span>
                            </a>
                        </td>
                        <td>Behance Support</td>
                        <td class="subject">
                            <p class="email-summary">
                                <strong>Upgrade your membership</strong>, you may be eligible for a FREE Trial.</p>
                        </td>
                        <td class="time text-right">Jan 11 at 10:11pm</td>
                    </tr>

                    <tr class="unread">
                        <td class="small-col">
                            <input type="checkbox" />
                        </td>
                        <td class="small-col"><i class="fa fa-star"></i>
                        </td>
                        <td class="name">
                            <a class="star" href="">
                                <span class="entypo-tumblr"></span>
                            </a>
                        </td>
                        <td>Tumblr</td>
                        <td class="subject">
                            <p class="email-summary">
                                <strong>Follow</strong>more blogs and have more fun</p>
                        </td>
                        <td class="time text-right">Jan 11 at 9:54pm</td>
                    </tr>

                    <tr class="unread">
                        <td class="small-col">
                            <input type="checkbox" />
                        </td>
                        <td class="small-col"><i class="fa fa-star"></i>
                        </td>
                        <td class="name">
                            <a class="star" href="">
                                <span class="entypo-paypal"></span>
                            </a>
                        </td>
                        <td>Paypal</td>
                        <td class="subject">
                            <p class="email-summary">
                                We're transferring money from PayPal to your bank</p>
                        </td>
                        <td class="time text-right">Jan 11 at 9:54pm</td>
                    </tr>


                    <tr class="unread">
                        <td class="small-col">
                            <input type="checkbox" />
                        </td>
                        <td class="small-col"><i class="fa fa-star"></i>
                        </td>
                        <td class="name">
                            <a class="star" href="">
                                <span class="entypo-dropbox"></span>
                            </a>
                        </td>
                        <td>Dropbox</td>
                        <td class="subject">
                            <strong>New Update</strong>Now are available, get it now!
                        </td>
                        <td class="time text-right">Jan 11 at 9:54pm</td>
                    </tr>
                    <!-- TWO -->
                    <tr class="unread">
                        <td class="small-col">
                            <input type="checkbox" />
                        </td>
                        <td class="small-col"><i class="fa fa-star"></i>
                        </td>
                        <td class="name"><a class="star" href=""><i class="fa fa-twitter"></i></a>
                        </td>
                        <td>Twitter</td>
                        <td class="subject">
                            <p class="email-summary">
                                <strong>Do You Know</strong>Iko Uwais, Justin Beiber on twitter? ...</p>
                        </td>
                        <td class="time text-right">Jan 8 at 07:10am</td>
                    </tr>

                    <tr class="unread">
                        <td class="small-col">
                            <input type="checkbox" />
                        </td>
                        <td class="small-col"><i class="fa fa-star"></i>
                        </td>
                        <td class="name"> <a class="star" href=""><i class="fa fa-facebook"></i></a>
                        </td>
                        <td>Facebook</td>
                        <td class="subject">
                            <p class="email-summary">
                                <strong>Meeting Reminder</strong>Ut enim ad minim veniam, quis nostrud exercitation...</p>
                        </td>
                        <td class="time text-right">Yesterday at 1:30am</td>
                    </tr>


                    <tr class="unread">
                        <td class="small-col">
                            <input type="checkbox" />
                        </td>
                        <td class="small-col"><i class="fa fa-star"></i>
                        </td>
                        <td class="name">
                            <a class="star" href="">
                                <span class="entypo-instagrem"></span>
                            </a>
                        </td>
                        <td>Instagram</td>
                        <td class="subject">
                            <p class="email-summary">
                                <strong>User Interface Conference</strong>Ut enim ad minim veniam, quis nostrud exercitation...</p>
                        </td>
                        <td class="time text-right">Jan 13 at 7:30am</td>
                    </tr>


                    <tr class="unread">
                        <td class="small-col">
                            <input type="checkbox" />
                        </td>
                        <td class="small-col"><i class="fa fa-star"></i>
                        </td>
                        <td class="name">
                            <a class="star" href="">
                                <span class="entypo-user"></span>
                            </a>
                        </td>
                        <td>Jhony Deep</td>
                        <td class="subject">
                            <p class="email-summary">
                                <strong>Hi, matirasa</strong>how are u today?</p>
                        </td>
                        <td class="time text-right">Jan 11 at 7:32am</td>
                    </tr>


                    <tr class="unread">
                        <td class="small-col">
                            <input type="checkbox" />
                        </td>
                        <td class="small-col"><i class="fa fa-star"></i>
                        </td>
                        <td class="name">
                            <a class="star" href="">
                                <span class="entypo-behance"></span>
                            </a>
                        </td>
                        <td>Behance Support</td>
                        <td class="subject">
                            <p class="email-summary">
                                <strong>Upgrade your membership</strong>, you may be eligible for a FREE Trial.</p>
                        </td>
                        <td class="time text-right">Jan 11 at 10:11pm</td>
                    </tr>

                    <tr class="unread">
                        <td class="small-col">
                            <input type="checkbox" />
                        </td>
                        <td class="small-col"><i class="fa fa-star"></i>
                        </td>
                        <td class="name">
                            <a class="star" href="">
                                <span class="entypo-tumblr"></span>
                            </a>
                        </td>
                        <td>Tumblr</td>
                        <td class="subject">
                            <p class="email-summary">
                                <strong>Follow</strong>more blogs and have more fun</p>
                        </td>
                        <td class="time text-right">Jan 11 at 9:54pm</td>
                    </tr>

                    <tr class="unread">
                        <td class="small-col">
                            <input type="checkbox" />
                        </td>
                        <td class="small-col"><i class="fa fa-star"></i>
                        </td>
                        <td class="name">
                            <a class="star" href="">
                                <span class="entypo-paypal"></span>
                            </a>
                        </td>
                        <td>Paypal</td>
                        <td class="subject">
                            <p class="email-summary">
                                We're transferring money from PayPal to your bank</p>
                        </td>
                        <td class="time text-right">Jan 11 at 9:54pm</td>
                    </tr>


                    <tr class="unread">
                        <td class="small-col">
                            <input type="checkbox" />
                        </td>
                        <td class="small-col"><i class="fa fa-star"></i>
                        </td>
                        <td class="name">
                            <a class="star" href="">
                                <span class="entypo-dropbox"></span>
                            </a>
                        </td>
                        <td>Dropbox</td>
                        <td class="subject">
                            <strong>New Update</strong>Now are available, get it now!
                        </td>
                        <td class="time text-right">Jan 11 at 9:54pm</td>
                    </tr>

                    <!-- END OF TWO -->
                    <!-- THREE -->
                    <tr class="unread">
                        <td class="small-col">
                            <input type="checkbox" />
                        </td>
                        <td class="small-col"><i class="fa fa-star"></i>
                        </td>
                        <td class="name"><a class="star" href=""><i class="fa fa-twitter"></i></a>
                        </td>
                        <td>Twitter</td>
                        <td class="subject">
                            <p class="email-summary">
                                <strong>Do You Know</strong>Iko Uwais, Justin Beiber on twitter? ...</p>
                        </td>
                        <td class="time text-right">Jan 8 at 07:10am</td>
                    </tr>

                    <tr class="unread">
                        <td class="small-col">
                            <input type="checkbox" />
                        </td>
                        <td class="small-col"><i class="fa fa-star"></i>
                        </td>
                        <td class="name"> <a class="star" href=""><i class="fa fa-facebook"></i></a>
                        </td>
                        <td>Facebook</td>
                        <td class="subject">
                            <p class="email-summary">
                                <strong>Meeting Reminder</strong>Ut enim ad minim veniam, quis nostrud exercitation...</p>
                        </td>
                        <td class="time text-right">Yesterday at 1:30am</td>
                    </tr>


                    <tr class="unread">
                        <td class="small-col">
                            <input type="checkbox" />
                        </td>
                        <td class="small-col"><i class="fa fa-star"></i>
                        </td>
                        <td class="name">
                            <a class="star" href="">
                                <span class="entypo-instagrem"></span>
                            </a>
                        </td>
                        <td>Instagram</td>
                        <td class="subject">
                            <p class="email-summary">
                                <strong>User Interface Conference</strong>Ut enim ad minim veniam, quis nostrud exercitation...</p>
                        </td>
                        <td class="time text-right">Jan 13 at 7:30am</td>
                    </tr>


                    <tr class="unread">
                        <td class="small-col">
                            <input type="checkbox" />
                        </td>
                        <td class="small-col"><i class="fa fa-star"></i>
                        </td>
                        <td class="name">
                            <a class="star" href="">
                                <span class="entypo-user"></span>
                            </a>
                        </td>
                        <td>Jhony Deep</td>
                        <td class="subject">
                            <p class="email-summary">
                                <strong>Hi, matirasa</strong>how are u today?</p>
                        </td>
                        <td class="time text-right">Jan 11 at 7:32am</td>
                    </tr>


                    <tr class="unread">
                        <td class="small-col">
                            <input type="checkbox" />
                        </td>
                        <td class="small-col"><i class="fa fa-star"></i>
                        </td>
                        <td class="name">
                            <a class="star" href="">
                                <span class="entypo-behance"></span>
                            </a>
                        </td>
                        <td>Behance Support</td>
                        <td class="subject">
                            <p class="email-summary">
                                <strong>Upgrade your membership</strong>, you may be eligible for a FREE Trial.</p>
                        </td>
                        <td class="time text-right">Jan 11 at 10:11pm</td>
                    </tr>

                    <tr class="unread">
                        <td class="small-col">
                            <input type="checkbox" />
                        </td>
                        <td class="small-col"><i class="fa fa-star"></i>
                        </td>
                        <td class="name">
                            <a class="star" href="">
                                <span class="entypo-tumblr"></span>
                            </a>
                        </td>
                        <td>Tumblr</td>
                        <td class="subject">
                            <p class="email-summary">
                                <strong>Follow</strong>more blogs and have more fun</p>
                        </td>
                        <td class="time text-right">Jan 11 at 9:54pm</td>
                    </tr>

                    <tr class="unread">
                        <td class="small-col">
                            <input type="checkbox" />
                        </td>
                        <td class="small-col"><i class="fa fa-star"></i>
                        </td>
                        <td class="name">
                            <a class="star" href="">
                                <span class="entypo-paypal"></span>
                            </a>
                        </td>
                        <td>Paypal</td>
                        <td class="subject">
                            <p class="email-summary">
                                We're transferring money from PayPal to your bank</p>
                        </td>
                        <td class="time text-right">Jan 11 at 9:54pm</td>
                    </tr>


                    <tr class="unread">
                        <td class="small-col">
                            <input type="checkbox" />
                        </td>
                        <td class="small-col"><i class="fa fa-star"></i>
                        </td>
                        <td class="name">
                            <a class="star" href="">
                                <span class="entypo-dropbox"></span>
                            </a>
                        </td>
                        <td>Dropbox</td>
                        <td class="subject">
                            <strong>New Update</strong>Now are available, get it now!
                        </td>
                        <td class="time text-right">Jan 11 at 9:54pm</td>
                    </tr>

                    <!-- END OF THREE -->


                </table>
            </div>
            <!-- /.table-responsive -->


        </div>

    </div>
</div>
<!-- /.row -->

<!-- right col -->
</div>
<script>
// Replace the <textarea id="editor1"> with a CKEditor
// instance, using default configuration.
CKEDITOR.replace('editor1');
//bootstrap WYSIHTML5 - text editor
$(".textarea").wysihtml5();
</script>
